<template lang="pug">
  .CreateAccountModal
    Modal(
      v-model="isShowCreateTaxDeclareModal"
      :title="createTaxDeclareModalTitle"
      class-name="vertical-center-modal"
      width="480"
    )
      Form.ivu-row.has-rules-item(ref="formData" :model="formData" :rules="rules" :label-width="150")
        FormItem.form-item.ivu-col(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
          template(v-if="item.type === 'input'")
            Input(v-model="formData[item.model]" :placeholder="item.placeholder" :disabled="item.isDisabled")
          template(v-if="item.type === 'select'")
            Select(v-model="formData[item.model]" :placeholder="item.placeholder" filterable)
              Option(v-for="(c_item, c_index) of arrListDown[item.options]" :key="c_index" :value="c_item.value") {{c_item.label}}
          template(v-if="item.type === 'cascader'")
            .areaTree.mb-10
              Cascader(v-model="formData[item.model]" :data="areaTree" clearable @on-change="areaTreeChange(item.model, $event)")
            Input(v-model="formData[item.modelDetail]" :placeholder="item.placeholderDetail")
          template(v-if="item.type === 'switch'")
            i-switch(v-model="formData[item.model]")
      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSubmit") 保存
</template>

<script>
import { Common } from '@/utils/common.js'
import { DeclareUnitApi } from '@/api/DeclareUnit.api.js'
export default {
  name: 'CreateTaxDeclareModal',

  watch: {
  },

  computed: {
  },

  data () {
    return {
      isShowCreateTaxDeclareModal: false,
      createTaxDeclareModalTitle: '',
      // basicDataId: null,
      formData: {
        id: '',
        name: '',
        taxAccount: '',
        axsDeclareUnitId: '',
        cityArr: [],
        cityArrStr: '',
        address: '',
        organizationId: '',
        type: '',
        isDefault: 'false',
        enabled: true,
        provinceId: '',
        cityId: '',
        districtId: ''
      },
      formItem: [
        { type: 'input', label: '个税申报单位', placeholder: '请输入个税申报单位', prop: 'name', model: 'name', style: 'ivu-col-span-24' },
        { type: 'input', label: ' 纳税人识别号', placeholder: '请输入 纳税人识别号', prop: 'taxAccount', model: 'taxAccount', style: 'ivu-col-span-24' },
        { type: 'cascader', label: '申报单位所在地区', placeholder: '请选择申报单位所在地区', prop: 'cityArr', model: 'cityArr', modelDetail: 'address', placeholderDetail: '请输入详细地址', style: 'ivu-col-span-24' },
        { type: 'input', label: '安薪税法务实体ID', placeholder: '请输入安薪税法务实体ID', prop: 'axsDeclareUnitId', model: 'axsDeclareUnitId', style: 'ivu-col-span-24' },
        { type: 'select', label: '所属人力资源公司', placeholder: '请选择所属人力资源公司', prop: 'organizationId', model: 'organizationId', style: 'ivu-col-span-24', options: 'organizationSource' },
        { type: 'select', label: '单位类型', placeholder: '请选择单位类型', prop: 'type', model: 'type', style: 'ivu-col-span-24', options: 'typeSource' },
        { type: 'select', label: '默认值', placeholder: '请选择默认值', prop: 'isDefault', model: 'isDefault', style: 'ivu-col-span-24', options: 'defaultOps' },
        { type: 'switch', label: '启用', placeholder: '请选择是否启用', prop: 'enabled', model: 'enabled', style: 'ivu-col-span-24' }
      ],
      rules: {
      },
      arrListDown: {
        organizationSource: [],
        typeSource: [],
        defaultOps: [
          { label: '是', value: 'true' },
          { label: '否', value: 'false' }
        ]
      },
      areaTree: [] // 中国所有城市树
    }
  },

  mounted () {
    this.areaTree = JSON.parse(localStorage.getItem('areaTree')) // 获取中国所有城市树
  },

  methods: {
    // 监听所有调用的方法
    listenCall (methodsWords, param) {
      this[methodsWords](param)
    },

    cancel () {
      this.isShowCreateTaxDeclareModal = false
    },

    show () {
      this.isShowCreateTaxDeclareModal = true
      this.$refs.formData.resetFields()
      console.log('点击是的show()')
    },

    // 提交表单
    handleSubmit () {
      this.formData.provinceId = this.formData.cityArr[0]
      this.formData.cityId = this.formData.cityArr[1]
      this.formData.districtId = this.formData.cityArr[2]
      console.log('提交表单：', this.formData)
      this.$refs.formData.validate((valid) => {
        if (valid) {
          DeclareUnitApi.save(this.formData).then(res => {
            if (res.status === 200 && res.data.success) {
              this.isShowCreateTaxDeclareModal = false
              this.$Message.success(res.data.message)
              this.$emit('handleSubmit')
            } else {
              this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
              })
            }
          })
        } else {
          this.$Message.warning('输入有误，请返回检查!')
        }
      })
    },

    // 根据ID获取用户信息
    async getModel (id) {
      console.log('🐟 id: ', id)
      let res = await DeclareUnitApi.getModel({ id: id || '' })
      console.log('获取modal res: ', res)
      if (res.status === 200 && res.data.success) {
        var data = res.data.data
        this.arrListDown.organizationSource = data.organizationSource
        data.typeSource.map(item => {
          item.label = item.text
        })
        this.arrListDown.typeSource = data.typeSource

        Object.keys(this.formData).forEach(key => {
          if (key == 'enabled') {
            this.formData[key] = data[key]
          } else if (key == 'isDefault') {
            this.formData[key] = data[key] + ''
          } else {
            this.formData[key] = data[key] ? data[key] + '' : ''
          }
        })
        this.formData.cityArr = [data.provinceId, data.cityId, data.districtId]
      } else {
      }
    },

    // 所在地区选择
    areaTreeChange (model, value) {
      this.formData[model] = value
    }
  }
}
</script>

<style lang="less" scoped>

</style>
